*{margin: 0; padding: 0;}
/* 背景页面 */
body{
    background: linear-gradient(90deg, rgba(55,163,240,1) 22%, rgba(88,147,245,1) 43%, #8080ff 98%);overflow-y: hidden;
}
div{
    position: relative;
}
div > p{
    position: absolute;
    top: 120px;
    left: 10px;
}
div>img:nth-child(1){
      margin: 50px;
      width: 230px;
      height: 211px;
}
div > h1{
  /*   width: 980px;
    color: #694f94; */
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
  /*   line-height: 1.06;
    letter-spacing: -0.02em; */
    top: 100px;
    left: 320px;
    color: #694f94;
    width: 500px;
    height: 50px;

}
.mask {
    width: 600px;
    height: 53px;
    position: relative;
    top: -135px;
    left: 320px;
    font-size: 36px;
    overflow: hidden;
}

.mask span{
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 100px;
    font-weight: bold;

    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-repeat: no-repeat;
}
.mask span[data-show] {
    transform: translateY(-100%);
}
.mask span[data-up] {
    transform: translateY(-200%);
}
.mask span:nth-child(1){
    background-image: linear-gradient(45deg,#c6fe0e  50%, #07a6f1);
}

.mask span:nth-child(2){
    background-image: linear-gradient(45deg, #18e198 50%, #07e6f1) ;
}

.mask span:nth-child(3){
    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c) ;
}

.mask span:nth-child(4){
    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f) ;
}
/* 登录界面 */
.rgi{
    width: 350px;
    height: 370px;
    position: absolute;
    right: 220px;
    top: 275px;
    border-radius: 34px;
    background: #aea7ec;
    box-shadow:  11px 11px 22px #9791cd,
             -11px -11px 22px #c5bdff;
}
.rgi > form {
    width: 300px;
    height: 350px;
    margin: 50px auto;
}

#zh,#mm{
    position: absolute;
    top: 38px;
    left: 8px;
  }
  #yj{
    position: absolute;
    top: 40px;
    right: 8px;
    cursor: pointer;
  }
